<template>
  <div>
    <TablePageContainer>
      <template #header>
        <el-form :model="table.params" :inline="true">
          <el-form-item label="用户ID">
            <el-input v-model="table.params.userId" placeholder="请输入用户ID" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #table>
        <el-table v-loading="table.loading" class="w_100" :data="table.data" border stripe @selection-change="handleTableSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="头像" width="100" align="center">
            <template slot-scope="scope">
              <el-image class="table_pic" :src="scope.row.avatar" :preview-src-list="[scope.row.logo]">
                <div slot="placeholder" class="image-slot">
                  <i class="fa fa-spinner fa-spin" />
                </div>
                <div slot="error" class="table_pic_error">
                  <i class="fa fa-image" />
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户账号" align="center" />
          <el-table-column prop="nickName" label="用户姓名" align="center" />
          <el-table-column prop="createdTime" label="登录时间" align="center" sortable>
            <template slot-scope="scope">
              {{ parseTime(scope.row.createdTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="timeout" label="过期时间" align="center" sortable>
            <template slot-scope="scope">
              {{ timeStamp(scope.row.timeout) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
              <el-button type="text" icon="fa fa-pen-to-square" @click="handleLoginOut(scope.row)">强制下线</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #page>
        <Pagination :total.sync="table.total" :page.sync="table.params.pageNum" :limit.sync="table.params.pageSize" @pagination="getList" />
      </template>
    </TablePageContainer>
  </div>
</template>
<script>
import { getPage, logout } from '@/api/user/userOnline'
import _ from 'lodash'
import { parseTime, timeStamp } from '@/utils'

export default {
  name: 'OnlineUserMonitor',
  components: {
    TablePageContainer: () => import('@/components/TablePageContainer'),
    Pagination: () => import('@/components/Pagination')
  },
  data() {
    return {
      table: {
        params: {
          userId: '',
          pageNum: 1,
          pageSize: 10
        },
        defaultParams: undefined,
        loading: false,
        data: [],
        total: 0,
        selectionRows: []
      }
    }
  },
  created() {
    this.table.defaultParams = _.cloneDeep(this.table.params)
    this.getList()
  },
  methods: {
    timeStamp,
    parseTime,
    getList() {
      this.table.loading = true
      getPage(this.table.params).then(res => {
        this.table.data = res.data.records
        this.table.total = res.data.total
        this.table.loading = false
      })
    },
    handleLoginOut(row) {
      this.$confirm('此操作将强制下线该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        logout(row.sessionId).then(res => {
          this.$message.success('强制下线成功')
          this.getList()
        })
      })
    },
    handleTableSelectionChange(val) {
      this.table.selectionRows = val
    },
    handleReset() {
      this.table.params = _.cloneDeep(this.table.defaultParams)
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
